<h1 class="screenreader-only">{{#t "pages_title"}}Pages{{/t}}</h1>
{{#if CAN.VIEW_TOOLBAR}}
<div class="header-bar-outer-container">
  <div class="header-bar-container sticky-toolbar-with-right-side" data-sticky>
    <div class="header-bar">
      <div class="header-bar-right">
        {{#if CAN.CREATE}}
          <a class="btn btn-primary icon-plus new_page" role="button" tabindex="0" aria-label="{{#t 'buttons.new_page_label'}}Add a page{{/t}}">{{#t 'buttons.new_page'}}Page{{/t}}</a>
        {{/if}}
      </div>
    </div>
  </div>
</div>
{{/if}}

<div class="index-content-container">
  <div class="index-content">
    <table class="ic-Table ic-Table--condensed ic-Table--striped ic-Table--hover-row" role="grid">
      <thead>
        <tr class="header-row" role="row">
          <th width="{{#if CAN.MANAGE}}{{#if CAN.PUBLISH}}42%{{else}}46%{{/if}}{{else}}60%{{/if}}" role="columnheader">
            <a href="#" data-sort-field="title" tabindex="0" role="button" class="sort-field">{{#t 'headers.page_title'}}Page title{{/t}} <i></i></a>
          </th>
          <th width="20%" role="columnheader">
            <a href="#" data-sort-field="created_at" tabindex="0" role="button" class="sort-field">{{#t 'headers.creation_date'}}Creation date{{/t}} <i></i></a>
          </th>
          <th width="20%" role="columnheader">
            <a href="#" data-sort-field="updated_at" tabindex="0" role="button" class="sort-field">{{#t 'headers.last_edit'}}Last edit{{/t}} <i></i></a>
          </th>
          <th width="5%" role="columnheader">
            
          </th>
          <th width="5%" role="columnheader">
            
          </th>
        </tr>
      </thead>
      <tbody class="collectionViewItems">
        {{#if fetched}}
          {{#unless collection.length}}
          <tr class="no-pages{{#if CAN.CREATE}} clickable{{/if}}"><td class="no-pages-cell" colspan="{{#if CAN.MANAGE}}{{#if CAN.PUBLISH}}5{{else}}4{{/if}}{{else}}3{{/if}}">{{#t 'no_pages'}}No pages created yet.{{/t}}{{#if CAN.CREATE}} <a class="new_page" href="#">{{#t 'add_page'}}Add one!{{/t}}</a>{{/if}}</td></tr>
          {{/unless}}
        {{/if}}
      </tbody>
    </table>
    {{#unless fetchedLast}}
      <div class="loading {{#unless fetched}}loading{{else}}loading-more{{/unless}}">
        <img src="/images/ajax-reload-animated.gif">
        {{#unless fetched}}{{#t 'loading'}}Loading ...{{/t}}{{else}}{{#t 'loading_more'}}Loading more ...{{/t}}{{/unless}}
      </div>
    {{/unless}}
  </div>
</div>
